<template>
  <BasicModal width="800px" @ok="ok"
              @register="register" title="编辑" @visible-change="visibleChange">
    <BasicForm @register="registerForm" @submit="submit" @reset="reset"/>
    <a-table :row-selection="rowSelection" row-key="id" :customRow="customRow"
             :pagination="paginationProp" :scroll="{ y: 400 }"
             bordered size="small" :columns="columns" :data-source="dataSource"></a-table>
  </BasicModal>
</template>
<script setup>
import { BasicModal, useModal } from "@/components/Modal";
import { nextTick, onMounted, ref, shallowRef } from "vue";
import BasicForm from "@/components/Form/src/BasicForm.vue";
import { useForm } from "@/components/Form";
import { defHttp } from "@/utils/http/axios";
import { real } from "@/utils";

defineOptions({ name: "UnitSelectModal" });
const [register, { closeModal, openModal, setModalProps }] = useModal();
const props = defineProps({
  value: {
    type: String,
    default: undefined
  },
  titleField: {
    type: String,
    default: undefined
  }
});
const paginationProp = ref({
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "30", "40", "50", "100", "500"],
  showTotal: (total) => `总 ${total} 条`
});

const innerDataSource = shallowRef([]);
const columns = [
  {
    title: "单位编码",
    dataIndex: "unitCode"
  },
  {
    title: "单位名称",
    dataIndex: "unitName"
  },
  {
    title: "单位全称",
    dataIndex: "unitFullName"
  }
];

function customRow(record, index) {
  return {
    onClick() {
      let set = new Set(rowSelection.value.selectedRowKeys);
      if (set.has(record.id)) {
        set.delete(record.id)
      } else {
        set.add(record.id);
      }
      rowSelection.value.selectedRowKeys = [...set];
    }
  }
}
const rowSelection = ref({
  selectedRowKeys: [],
  selectedRows: [],
  onChange(selectedRowKeys, selectedRows) {
    rowSelection.value.selectedRowKeys = selectedRowKeys;
    rowSelection.value.selectedRows = selectedRows;
  }
});
const dataSource = shallowRef([]);
const emits = defineEmits(["change", "close"]);
const [registerForm, {
  getFieldsValue,
  resetFields,
  validateFields,
  setFieldsValue,
  validate
}] = useForm({
  labelWidth: 120,
  schemas: [
    {
      label: "单位编码",
      field: "unitCode",
      component: "Input",
      colProps: { span: 12 }
    },
    {
      label: "单位名称",
      field: "unitName",
      component: "Input",
      colProps: { span: 12 }
    },
    {
      label: "单位全称",
      field: "unitFullName",
      component: "Input",
      colProps: { span: 12 }
    }
  ]
});

function visibleChange(visile) {
  if (!visile) {
    emits("close");
  }
}

function loadData() {
  defHttp.get({ url: "/cwqs/cwqsUnit/list", params: { pageSize: 1000, pageNo: 1 } }).then(data => {
    data.records = data.records || [];
    innerDataSource.value = data.records;
    dataSource.value = [...data.records];
  });
}

onMounted(() => {
  loadData();
  nextTick(() => {
    rowSelection.value.selectedRowKeys = props.value ? (props.value.split(",")) : [];
  })
});

function reset() {
  console.log('this.$refs..resetFields();')
  dataSource.value = [...innerDataSource.value];
}

function submit() {
  let data = getFieldsValue();
  dataSource.value = innerDataSource.value.filter(item => {
    for (const key in data) {
      if (data[key]) {
        if ((item[key] + "").indexOf(data[key]) === -1) {
          return false;
        }
      }
    }
    return true;
  });
}

function ok() {
  let keys = rowSelection.value.selectedRowKeys.toString();
  let set = new Set(rowSelection.value.selectedRowKeys);
  let list = innerDataSource.value.filter(d => set.has(d.id));
  let titles = list.map(item => item.unitName).toString();

  emits("change", { keys, titles });
  closeModal();
}

defineExpose({
  openModal
});
</script>
